<template>
    <view class="media">
        <view class="container-itemV3" v-for="item in jdata" :key="item.id">
            <view class="item-con item-front">
                <a class="card-front">
                  <view class="content">
                    <view class="title">
                        <view class="tit" :title="item.title">{{item.title}}</view>
                    </view>
                    <view class="desc">
                        {{item.description}}
                    </view>

                        <view class="cli">
                            <view class="date">{{item.cdate}}</view>
                            <view class="click">
                                <view class="img">
                                   <img :src="jimg['779ab593866a6187b2f34ee0b4757c0e']"/>
                                </view>
                                <view>{{item.click}}</view>
                            </view>
                        </view>

                    </view>

                    <view class="pic2">
						          <img class="swiper-lazy"  :src="item.image" :alt="item.title" />
                    </view>
                    
                </a>
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      // imageList:[]
    };
  },
  props: {
      jimg:{
            type: Array,
        }
  },

  methods: {

  },
};
</script>

<style scoped>

.media .container-itemV3 {
    height: 194upx;
    width: 670upx;
    border:1upx solid #cdd7e1;
    border-radius: 10upx;
    margin: 0 auto;
	  margin-bottom: 20upx;
}
.media .container-itemV3 .card-front{
    display: flex;
}
.media .container-itemV3 .card-front .pic2{
    width: 270upx;
    height: 194upx;
    border-radius: 10upx;
    background: lightcoral;
}
.media .container-itemV3 .card-front .pic2>img{
    width: 100%;
    height: 100%;
}
.media .container-itemV3 .card-front .conten{
  height: 200upx;
  width: 392upx;
}

.media .container-itemV3 .card-front .content .title .tit{
  height: 36upx;
  width: 366upx;
  overflow: hidden;
  color: #343434;
  font-size: 28upx;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 20upx;
  margin-left:14upx;
}
.media .container-itemV3 .card-front .content .desc{
  height: 82upx;
  width: 366upx;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2;
  color: #9a9a9a;
  font-size: 24upx;
  line-height: 40upx;
  margin-top:10upx;
  margin-left: 14upx;
}
.media .container-itemV3 .card-front .content .cli{
  display: flex;
}
.media .container-itemV3 .card-front .content .cli .date{
  font-size: 24upx;
  color: #333;
  margin-left:14upx ;
  padding-right:100upx ;
}
.media .container-itemV3 .card-front .content .cli .click{
  display: flex;
}
.media .container-itemV3 .card-front .content .cli .click .img{
  width: 44upx;
  height: 24upx;
  margin-right: 10upx;
  margin-top: 5upx;
}
.media .container-itemV3 .card-front .content .cli .click .img>img{
  height: 100%;
  width: 100%;
}
</style>
